<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行情提示</title>
		<script src="../js/base.js"></script>
	</head>
    <style type="text/css">
        .top{
            padding: 0px 15px;
            box-sizing: border-box;
            height: 50px;
            line-height: 50px;
            background-color: #424242;
            text-align: center;
        }
        .left_arrow{
            width: 23px;
            height: 25px;
            top: 13px;
            left: 15px;
            background-size: 50%;
            position: absolute;
            background-image: url(../img/arrow_left.png);
            z-index: 100;
        }
        .section_1st{
            padding: 30px 15px 25px;
            box-sizing: border-box;
            background-color: #393939;
        }
        .set_item{
            padding: 20px 15px;
            box-sizing: border-box;
            margin-top: 2px;
            background-color: #424242;
        }
        .account_item{
            margin-left: 60px;
        }
        .account_item2{
            margin-left: 16px;
        }
        .account_item input{
            box-sizing: border-box;
            /*width: 100%;*/
            text-align: left;
            font-size: 14px;
            background: transparent;
            color: #efefef;
        }
        .account_item2 input{
            box-sizing: border-box;
            /*width: 100%;*/
            text-align: left;
            font-size: 14px;
            background: transparent;
            color: #efefef;
        }
        .form_switch_wrap {
            box-sizing: border-box;
            color: #222;
            text-align: right;
            float: right;
            /*width: 65%;*/
            height: 48px;
        }
        .last_div{
            padding: 0px 15px;
            box-sizing: border-box;
        }
        /***** checkbox样式 ***/
        .myswitch{
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
            width: 40px;
            height: 20px;
            border: 1px solid #DFDFDF;
            outline: 0;
            border-radius: 10px;
            box-sizing: border-box;
            background: #DFDFDF;
        }
        .myswitch:before{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 38px;
            height: 18px;
            border-radius: 9px;
            background-color: #FDFDFD;
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
        }
        .myswitch:after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width:18px;
            height: 18px;
            border-radius: 9px;
            background-color: #CCCCCC;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            transition: transform .3s, -webkit-transform .3s;
        }
        .myswitch:checked{
            border-color: #e1b080;
            background-color: #e1b080;
        }
        .myswitch:checked:before{
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .myswitch:checked:after {
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
        .dianji{
            width: 110px;
            height: 25px;
            border-radius: 5px;
            box-shadow: 0 0 5px #ccc;
            position: relative;
            text-align: center;

        }
        select{
            border: none;
            outline: none;
            width: 100%;
            height: 25px;
            line-height: 28px;
            appearance: none;
            text-align: center;
            -webkit-appearance: none;
            -moz-appearance: none;
            border-radius: 5px;
            background-color: #c8c8c8;

        }
        .dianji:after{
            content: "";
            width: 20px;
            height: 12px;
            background: url(../img/xialaicon@2x.png) no-repeat center;
            position: absolute;
            right: 5px;
            top: 30%;
            pointer-events: none;
        }

        /***** checkbox样式 ***/
    </style>
	<body ms-controller="wm">
		<div class="top"><span class="left_arrow bgBox" onclick="javascript:history.back(-1);"></span>价格预警<span class="fr" id="isok" onclick="javascript:history.back(-1);">完成</span></div>
		<div class="section_1st">
			<div class="f30 color_ef">${pro_data.name}</div>
			<div class="f15 color999 mt15">最新价格<span class="colorred ml10" style="margin-right: 40px;">${pro_data.last_price}</span>涨跌幅<span class="colorred ml10"</span>${pro_data.change_count}%</div>
		</div>
		<div class="set_item">
			<span>行情涨到</span>
			<span class="account_item">
				<input type="number" placeholder="输入价格" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">
			<span>行情跌到</span>
			<span class="account_item">
				<input type="number" placeholder="输入价格" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">
			<span>日涨幅超过&nbsp;(%)</span>
			<span class="account_item2">
				<input type="number" placeholder="输入涨幅" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
		<div class="set_item">
			<span>日跌幅超过&nbsp;(%)</span>
			<span class="account_item2">
				<input type="number" placeholder="输入跌幅" ms-duplex-string="usermobile"/>
			</span>
			<span class="form_switch_wrap">
				<input class="myswitch radio_type" type="checkbox" ms-duplex-checked=""/>
			</span>
		</div>
        <div class="set_item">提醒频次
            <span class="fr color999 dianji">
				<select>
					<option value="仅提醒一次">仅提醒一次</option>
					<option value="每日提醒">每日提醒</option>
				</select>
			</span>
        </div>
		<div class="mt15 f10 color999 last_div">交易品种多次按照设置方向达到目标点位或目标涨跌幅，仅每个交易日第一次提醒</div>
	</body>
</html>
